<script setup lang="ts">
import {getCurrentInstance} from "vue";

// 生意参谋 市场 行业客群 支付偏好
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import PaymentAmountTab
  from "~/contentScripts/views/sycm/industry_customer/SycmIndustryCustomerPayPreferences/PaymentAmountTab.vue";
import PaymentFrequencyTab
  from "~/contentScripts/views/sycm/industry_customer/SycmIndustryCustomerPayPreferences/PaymentFrequencyTab.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";

const loginVisible = ref<Boolean>(false);
const data = ref<any>();
const date = ref<String>();
const visible = ref<Boolean>(false);
const tabActiveKey = ref<String>('1');
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  }, __option)) {
    date.value = document.querySelector(".oui-date-picker-current-date").innerHTML.replaceAll('统计时间', '').replaceAll(' ', '').replaceAll('\n', '').replaceAll('\t', '');
    data.value = await SYCM.getInternalFiberData('#sycm-mc-industry-customer-payment-preference > div > div > div', 'memoizedProps.children._owner.memoizedProps');
    console.log(data);
    visible.value = true;
  }
}
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal title="市场-行业客群-支付偏好" :width="800" v-model:visible="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
      </template>
      <a-tabs v-model:active-key="tabActiveKey" centered>
        <a-tab-pane key="1" tab="支付金额分布">
          <PaymentAmountTab :data="data" :date="date"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="支付频次分布">
          <PaymentFrequencyTab :data="data" :date="date"/>
        </a-tab-pane>
      </a-tabs>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
